<template>
  <view class="swiper-container">
    <!-- 轮播主体 -->
    <swiper
      :current="currentIndex" 
      :autoplay="autoPlay" 
      :interval="3000" 
      :duration="500"
      circular 
      @change="onSwiperChange"
      @touchstart="stopAutoPlay" 
      @touchend="startAutoPlay"
    >
      <swiper-item 
        v-for="(item, index) in swiperList" 
        :key="index"
      >
        <image 
          :src="item.image" 
          mode="aspectFill"
          class="swiper-img"
        />
        <text class="swiper-title">{{ item.title }}</text>
      </swiper-item>
    </swiper>

    <!-- 自定义指示器 -->
    <view class="custom-indicator">
      <text 
        v-for="(item, index) in swiperList" 
        :key="index" 
        :class="['dot', index === currentIndex ? 'active' : '']"
      />
    </view>

    <!-- 导航箭头 -->
    <view class="nav-arrows">
      <text class="arrow prev" @click="swipePrev">‹</text>
      <text class="arrow next" @click="swipeNext">›</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      autoPlay: true,
      swiperList: [
        {
          image: 'https://e3f49eaa46b57.cdn.sohucs.com/2025/3/9/16/7/MTAwMTIyXzE3NDE1MDc2MjczNjc=.jpg',
          title: ''
        },
        {
          image: 'https://e3f49eaa46b57.cdn.sohucs.com/2025/3/9/16/7/MTAwMTIyXzE3NDE1MDc2MjY0NzI=.jpg',
          title: ''
        },
        {
          image: 'https://e3f49eaa46b57.cdn.sohucs.com/2025/3/9/16/7/MTAwMTIyXzE3NDE1MDc2MjkwMjg=.jpg',
          title: ''
        }
      ]
    }
  },
  methods: {
    // 滑动切换
    onSwiperChange(e) {
      this.currentIndex = e.detail.current
    },
    
    // 上一页
    swipePrev() {
      if(this.currentIndex === 0) {
        this.currentIndex = this.swiperList.length - 1
      } else {
        this.currentIndex--
      }
    },
    
    // 下一页
    swipeNext() {
      if(this.currentIndex === this.swiperList.length - 1) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
    },
    
    // 开始自动播放
    startAutoPlay() {
      this.autoPlay = true
    },
    
    // 暂停自动播放
    stopAutoPlay() {
      this.autoPlay = false
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  position: relative;
  height: 100%;
}

swiper {
  width: 100%;
  height: 100%;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

.swiper-title {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  color: white;
  font-size: 32rpx;
  text-shadow: 2rpx 2rpx 6rpx rgba(0,0,0,0.5);
}

.custom-indicator {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  
  .dot {
    width: 14rpx;
    height: 14rpx;
    margin: 0 8rpx;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    transition: all 0.3s;
    
    &.active {
      background-color: #fff;
      transform: scale(1.3);
    }
  }
}

.nav-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  
  .arrow {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    color: white;
    font-size: 40rpx;
    
    &:active {
      background: rgba(0,0,0,0.6);
    }
  }
}
</style>